<template>
    <div class="datalist">
        <Row>
            <Col :xs="24">
                <Button type="primary" @click="add" class="addbutton" style="width:51px;height:35px;">
                    <i class = "iconfont icon-add" style="font-size:14px;margin-right:5px"></i>
                </Button>
                <Button type="primary" @click="copy" class="addbutton">
                    <i class = "iconfont icon-add" style="font-size:14px;margin-right:5px"></i>
                    复制任务
                </Button>
                <div style="display: inline-block">
                        <newfourLevelLinkage
                        @changeProvince="changeProvince"
                        @changeCity="changeCity"
                        @changeArea="changeArea"
                        :province="province"
                        :city="city"
                        :area="area"                    
                    ></newfourLevelLinkage>
                </div>
                <div style="display: inline-block;">
                    <DatePicker type="daterange" v-model="time" placement="bottom-end" placeholder="请选择创建日期" separator='至' format="yyyy-MM-dd" style="width: 200px;margin-bottom: 10px;"></DatePicker>
                </div>
                <Select class="w-select" clearable v-model="taskStatus" placeholder="状态" >
                    <Option value="1">未发布</Option>
                    <Option value="2">已发布</Option>
                    <Option value="3">进行中</Option>
                    <Option value="4">已完成</Option>
                </Select>
                <Input class="w-input" v-model="taskName" clearable placeholder="任务名称" />
                <Button type="primary" @click="loadPage(1)" style="width:51px;height:35px;">
                    <Icon type="ios-search" size="14"/>
                </Button>
                <Button @click="cancel" >
                    <i class = "iconfont icon-gengxin" style="font-size:14px;margin-right:5px"></i>
                </Button>
                <Button type="primary" @click="appurtent" >
                    辅助工具
                </Button>
            </Col>
        </Row>
        <Table class="m-table" border stripe :columns="columns" :data="datalist"></Table>
        <div class="page">
            <Page :total="count" :current='pageNo' :page-size="pageSize" show-total show-elevator @on-change="loadPage"/>
        </div>	
        <Modal
			v-model="taskModal"
            title = "复制并创建新任务"
			:footer="null"
            :mask-closable="false"
            :width = '450'
            styles="padding: none;margin: none"
            class="copy"
        >  	
        <!-- 控制弹窗右上角x号是否显示 :closable="false" -->
            <div class="box hongdian">
                <div class="left">  
                    <span style="color:red;">*</span>                      
                    <span>选择任务：</span>
                </div>
                <Select v-model="taskId" style="margin-right:5px;width: 70%">
                    <Option
                        v-for="item in taskList"
                        :value="item.id"
                        :key="item.id"
                    >{{ item.taskName }}</Option>
                </Select>
            </div>
            <div slot="footer" class="btn-group" style="text-align:center">
                <Button type="primary" @click="submit" style="width:75px;height:35px;" :disabled='disabledSave'>
                    <Icon type="ios-checkmark" style="margin-right: 5px" />保存
                </Button>
                <Button @click="close" style="width:75px;height:35px;">
                    <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>取消
                </Button>		
            </div>			
		</Modal>
        <Modal
			v-model="delModal"
            title = "删除任务"
			:footer="null"
            :mask-closable="false"
            :width = '450'
            styles="padding: none;margin: none"
        >  	
        <!-- 控制弹窗右上角x号是否显示 :closable="false" -->
            <div class="box">	
                确定要删除此任务吗？删除后不可恢复！
            </div>
            <div slot="footer" class="btn-group" style="text-align:center">
                <Button type="primary" @click="deltask" style="width:75px;height:35px;" :disabled='disabledDel'>
                    <Icon type="ios-checkmark" style="margin-right: 5px" />确定
                </Button>
                <Button @click="delModal = false" style="width:75px;height:35px;">
                    <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>取消
                </Button>		
            </div>			
        </Modal>	
    </div>
</template>
<script>
import api from "@/api/commonApi";
import newfourLevelLinkage from "@/components/newfourLevelLinkage";
import { DatePicker } from "view-design";
import Utils from "@/utils";
export default {
    components: {
        newfourLevelLinkage,
        DatePicker,
    },
    data() {
        return {
            province: null,
            city: null,
            area: null,
            time: [],
            taskName: '',
            taskStatus: '',
            delid: '',
            columns: [
                { title: "排序", key: "iNum", align: "center", width: 80,
                    render: (h, params) => {
                        let iNum = (this.pageNo-1)*this.pageSize + params.index +1;
                        return h("span", iNum);
                    }
                },
                {
                    title: "任务名称",
                    key: "taskName",
                    align: "center",
                    width: 200,
                },
                {
                    title: "任务地区",
                    key: "address",
                    align: "center",
                    width: 200,
                    render: (h, params) => {
                        let row = params.row;
                        let address = row.provinceName + row.cityName + row.areaName;
                        return h("span", {
                            domProps: {
                                innerHTML: address
                            }
                        });
                    }
                },
                {
                    title: "采集时间",
                    key: "collecttime",
                    align: "center",
                    width: 200,
                    render: (h, params) => {
                        let row = params.row;
                        let year = row.planeBeginTime.substring(0, 4)
                        let collecttime = year + '年' + row.time
                        return h("span", {
                            domProps: {
                                innerHTML: collecttime
                            }
                        });
                    }
                },
                {
                    title: "采集点数（个）",
                    key: "placeNum",
                    align: "center",
                    width: 200,
                },
                {
                    title: "计划工作人数（人）",
                    key: "workerNum",
                    align: "center",
                    width: 200,
                },
                {
                    title: "计划居民人数（人）",
                    key: "personNum",
                    align: "center",
                    width: 200,
                },
                {
                    title: "预估工时（小时）",
                    key: "workHour",
                    align: "center",
                    width: 200,
                    render: (h, params) => {
                        let workHour = params.row.workHour/60;
                        return h("span", {
                            domProps: {
                                innerHTML: workHour
                            }
                        });
                    }
                },
                {
                    title: "状态",
                    key: "status",
                    align: "center",
                    width: 120,
                    render: (h, params) => {
                        let status = params.row.status;
                        let statusText = '';
                        if(status==1) {
                            statusText = '未发布'
                        } else if(status==2) {
                            statusText = '已发布'
                        } else if(status==3) {
                            statusText = '进行中'
                        } else if(status==4) {
                            statusText = '已完成'
                        } 
                        return h("span", {
                            domProps: {
                                innerHTML: statusText
                            }
                        });
                    }
                },
                {
                    title: "设置",
                    key: "operate",
                    align: "center",
                    fixed: 'right',
                    width: 220,
                    render: (h, params) => {
                        let id = params.row.id;
                        let taskStatus = params.row.status;
                        let planeBeginTime = params.row.planeBeginTime.substring(11,16);
                        let planeEndTime = params.row.planeEndTime.substring(11,16);
                        let planedata = params.row.planeEndTime.substring(0,10);
                        return [
                            taskStatus == 1 ?
                                h(
                                    "span",
                                    {
                                        attrs: {
                                            href: "javascript:void(0);"
                                        },
                                        style: {
                                            color: '#5362e1',
                                            margin: "0px 6px"
                                        },
                                        on: {
                                            click: () => {
                                                this.functionJS.queryNavgationTo(
                                                    this,
                                                    "/index/nucleicacid/task/edit",
                                                    {
                                                        id,
                                                    }
                                                );
                                            }
                                        }
                                    },
                                    "编辑"
                                ) : '',
                            // taskStatus == 1 ? '|' : '',
                            h(
                                "span",
                                {
                                    attrs: {
                                        href: "javascript:void(0);"
                                    },
                                    style: {
                                        color: '#21c780',
                                        margin: "0px 6px"
                                    },
                                    on: {
                                        click: () => {
                                            this.functionJS.queryNavgationTo(
                                                this,
                                                "/index/nucleicacid/task/review",
                                                {
                                                    id,
                                                    taskStatus,
                                                }
                                            );
                                        }
                                    }
                                },
                                "详情"
                            ),
                            taskStatus == 1 ?
                                h(
                                    "span",
                                    {
                                        attrs: {
                                            href: "javascript:void(0);"
                                        },
                                        style: {
                                            color: '#f5a300',
                                            margin: "0px 6px"
                                        },
                                        on: {
                                            click: () => {
                                                this.functionJS.queryNavgationTo(
                                                    this,
                                                    "/index/nucleicacid/task/locationList",
                                                    {
                                                        id,
                                                        type: 'bj',
                                                        planeBeginTime,
                                                        planeEndTime,
                                                        planedata,
                                                    }
                                                );
                                            }
                                        }
                                    },
                                    "采集点维护"
                                ) : '',
                            taskStatus != 1 ?
                                h(
                                    "span",
                                    {
                                        attrs: {
                                            href: "javascript:void(0);"
                                        },
                                        style: {
                                            color: '#f5a300',
                                            margin: "0px 6px"
                                        },
                                        on: {
                                            click: () => {
                                                this.functionJS.queryNavgationTo(
                                                    this,
                                                    "/index/nucleicacid/task/locationList",
                                                    {
                                                        id,
                                                        type: 'ck',
                                                    }
                                                );
                                            }
                                        }
                                    },
                                    "采集点查看"
                                ) : '',
                            taskStatus == 1 ?
                                h(
                                    "span",
                                    {
                                        attrs: {
                                            href: "javascript:void(0);"
                                        },
                                        style: {
                                            color: '#fc6c49',
                                            margin: "0px 6px"
                                        },
                                        on: {
                                            click: () => {
                                                this.delid = id
                                                this.delModal = true
                                            }
                                        }
                                    },
                                    "删除"
                                ) : '',
                        ];
                    }
                }
            ],
            datalist: [],
            count: 0,
            pageSize: 10,
            pageNo: 1,
            id: null,
            taskModal: false,
            disabledSave: false,
            taskList: [],
            taskId: '',
            delModal: false,
            disabledDel: false,
        };
    },
    created() {
        this.province = this.$route.query.province ? parseInt(this.$route.query.province) : null;
        this.city = this.$route.query.city ? parseInt(this.$route.query.city) : null;
        this.area = this.$route.query.area ? parseInt(this.$route.query.area) : null;
        this.taskName = this.$route.query.taskName ? this.$route.query.taskName : "";
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/maintain/configurationWarehouse/index",
                title: "配置仓"
            },
            {
                path: "/index/maintain/name/list",
                title: "疾病字典"
            }
        ];
        this.$emit("changeBreadList", breadList);
    },
    mounted() {
        let pageNo = this.$route.query.pageNo
            ? parseInt(this.$route.query.pageNo)
            : 1;
        //上来就加载第一页数据
        this.loadPage(pageNo);
    },
    methods: {
        changeProvince(val) {
            this.province = val;
        },
        changeCity(val) {
            this.city = val;
        },
        changeArea(val) {
            this.area = val;
        },
        cancel() {
            this.province = ''
            this.city = ''
            this.area = ''
            this.taskName = ''
            this.taskStatus = ''
            this.time = []
            this.loadPage(1);
        },
        //加载列表数据
        loadPage(pageNo) {
            this.pageNo = parseInt(pageNo);
            var params = {};
            params.taskName = this.taskName.trim();
            params.taskStatus = this.taskStatus;
            params.provinceId = this.province;
            params.cityId = this.city;
            params.areaId = this.area;
            params.pageNo = pageNo;
            params.pageSize = this.pageSize;
            let startDate = this.time ? new Date(this.time[0]) : '';
            let endDate = this.time ? new Date(this.time[1]) : '';
            params.fromTime = startDate ? Utils.getNowDateBySpecialFormat(this.time[0]) : null;
            params.endTime = endDate ? Utils.getNowDateBySpecialFormat(this.time[1]) : null;
            if(params.fromTime && params.endTime) {
                params.fromTime = params.fromTime.substring(0,10)
                params.endTime = params.endTime.substring(0,10)
            }
            this.$axios
                .post(api.queryTaskList, params)
                .then(resp => {
                    if (resp.data.success) {
                        this.count = resp.data.object.total;                        
                        if(resp.data.object.records) {
                            this.datalist = resp.data.object.records;
                        } else {
                            this.datalist = []
                            this.count = 0
                        }                   
                    } else {
                        this.$Message.info("不允许访问");
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        add() {
            this.functionJS.queryNavgationTo(
                this,
                "/index/nucleicacid/task/add"
            );
        },
        //提交
        submit() {
            this.disabledSave = true
            if(!this.taskId) {
                this.$Message.error("请选择任务");
                this.disabledSave = false
                return
            } else {
                this.$axios
                    .post(api.copyTask, {taskId: this.taskId})
                    .then(resp => {
                        if (resp.data.success) {                      
                            this.$Message.success("任务复制成功!");
                            this.close()    
                            this.disabledSave = false   
                            // this.loadPage(1)
                            this.functionJS.queryNavgationTo(
                                this,
                                "/index/nucleicacid/task/edit",
                                {
                                    id: resp.data.object.id,
                                }
                            );
                        } else {
                            this.disabledSave = false
                            this.$Message.info("不允许访问");
                        }
                    })
                    .catch(err => {
                        this.disabledSave = false
                        console.log(err);
                    });
            }
        },
        //辅助工具
        appurtent() {
            this.functionJS.queryNavgationTo(
                this,
                "/index/nucleicacid/task/appurtenance",
            );
        },
        copy() {
            this.taskModal = true
            var params = {};
            params.pageNo = 1;
            params.pageSize = 10000;
            this.$axios
                .post(api.queryTaskList, params)
                .then(resp => {
                    if (resp.data.success) {                      
                        if(resp.data.object.records) {
                            this.taskList = resp.data.object.records;
                        } else {
                            this.taskList = []
                        }                   
                    } else {
                        this.$Message.info("不允许访问");
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        close() {
            this.taskModal = false
            this.taskId = ''
        },
        deltask() {
            this.disabledDel = true
            let id = this.delid
            this.$axios.post(api.deleteTask, {id}).then(res => {
                if (res.data.success) {
                    this.$Message.success(res.data.message);
                    this.disabledDel = false
                    this.delModal = false
                    this.loadPage(1)
                } else {
                    this.$Message.error(res.data.message);
                    this.disabledDel = false
                }
            }).catch(() => {
                this.disabledDel = false
            });
        },  
    }
};
</script>
<style lang="less" scoped>
.datalist {
    padding: 20px;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    .w-select {
        width: 100px;
    }
    .w-input {
        width: 200px;
    }
    .m-table {
        margin: 10px 0;
    }
    .addbutton{
        background-color: #21c780;
        border: 1px solid #21c780;
        // margin-bottom: 10px;
    }
    .page{
      text-align: center;
      margin: 20px 0;
    }
}
.box {
    display: flex; 
    margin-left: 25px;
    .left {
        font-size: 14px;
        padding-top: 5px;
        // span:last-child {
        //     font-weight: 600;
        // }
    }
}
.hongdian{
    margin-left: 25px;
}   
.w-select {
    width: 100px;
}
.w-input {
    width: 300px;
}
.copy {
    /deep/ .ivu-modal-wrap {
        .ivu-modal{
            float:right !important;
            background-color: #fff;
            border-radius: 10px;
            top: 0px;
            height: 100%;
        }
    }
}
</style>